<template>
  <div :class='[{"progressbox-vertical":direction === "vertical"} ,{ "progressbox-horizontal":direction !== "vertical" }]' ref='box' >
    <div class='db-progress-content' ref='progress_box_ref'>
      <div class='down-up-box' ref='down-up-box'>
        <div class='down-up-box-box' ref='down-up-box-box'>
          <div ref='down' v-if='down' >
            <slot name='down'>
              <p :style='downStyle' class='db-progress-down'></p>
            </slot>
          </div>
          <div ref='up' v-if='up'>
            <slot name='up'>
              <p :style='upStyle' class='db-progress-up'></p>
            </slot>
          </div>
        </div>
        <div ref='point' v-if='point'>
          <slot name='point'>
            <p :style='pointStyle' class='db-progress-point db-progress-point-horizontal' v-if=' direction !== "vertical" '></p>
            <p :style='pointStyle' class='db-progress-point db-progress-point-vertical' v-else></p>
          </slot>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Progress from './src/Progress'
export default {
  data() {
    return {
      Progress:null,
      upStyle: {
        'background-color':this.upColor,
      },
      downStyle: {
        'background-color':this.downColor,
      },
      pointStyle: {
        'background-color':this.pointColor,
      },
    }
  },
  props:{
    point : {
      type:Boolean,
      default: true,
    },
    down : {
      type:Boolean,
      default: true,
    }, 
    up : {
      type:Boolean,
      default: true,
    },
    pointColor: {
      type: String,
      default:'rgb(52, 219, 248)',
    },
    upColor: {
      type: String,
      default:'rgb(54, 248, 255)',
    },
    downColor: {
      type: String,
      default:'rgb(167, 167, 167)',
    },
    progress: {},
    width : String,
    height : String,
    type : String,
    onProgress: Function,
    Max : Number,
    direction : String,
  },
  watch:{
    progress( val ) {
      this.Progress.setProgress( val, this.onProgress )
    },
    Max( val ) {
      this.Progress.sgMax( val )
    },
    downColor( val ) {
      this.downColor = val
    },
    upColor( val ) {
      this.upColor = val
    },
    pointColor( val ) {
      this.pointColor = val
    },
  },
  mounted() {
    this.$refs.box.style.height = this.height
    this.$refs.progress_box_ref.style.height = this.height
    this.$refs.box.style.width = this.width
    this.$refs.progress_box_ref.style.width = this.width
    this.$slots.up ? '' : this.$refs['down-up-box'].className += ' down-up-box-radius' 
    this.$slots.up ? '' : this.$refs['down-up-box-box'].className += ' down-up-box-radius' 
    if( this.direction === 'vertical' ) {
      this.$refs.up ? this.$refs.up.children[0].className += ' progress-commot-vertical ' : ''

      this.$refs.down ? this.$refs.down.children[0].className += ' progress-commot-vertical ' : ''

      this.$refs.point ? this.$slots.up ? this.$refs.point.children[0].className += ' progress-point-vertical ' : '' : ''

    } else {
      this.$refs.up ? this.$refs.up.children[0].className += ' progress-commot-horizontal ' : ''
      this.$refs.down ? this.$refs.down.children[0].className += ' progress-commot-horizontal ' : ''
      this.$refs.point ? this.$slots.up ? this.$refs.point.children[0].className += ' progress-point-horizontal ' : '' : ''

    }
    this.Progress =  new Progress({ 
      type : this.type,
      direction : this.direction,
      progressBox : this.$refs.progress_box_ref, 
      up : this.$refs.up ? this.$refs.up.children[0] : undefined, 
      down : this.$refs.down ? this.$refs.down.children[0] : undefined, 
      point : this.$refs.point ? this.$refs.point.children[0] : undefined,
    }, this.onProgress)
    
  }
}
</script>

<style scoped>
.db-progress-down {
  border-radius:0.45em;
  box-sizing: border-box;
  position:absolute;
}
.db-progress-up {
  background-size: cover;
  border-radius:0.45em;
  box-sizing: border-box;
  position:absolute;
}
.db-progress-point {
  width:1em;
  height:1em;
  border-radius:50%;
  box-sizing: border-box;
  position:absolute;
}
.down-up-box {
  width:100%;
  height:100%;
}
.down-up-box-box {
  width:100%;
  height:100%;
  position: relative;
  overflow: hidden;
}
.down-up-box-radius {
  border-radius:.5em;
  overflow: hidden;
}
.progressbox-horizontal {
  width:100%;
  height:1em;
  padding:0.1em;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}
.progressbox-vertical {
  width:1em;
  height:100%;
  padding:0.1em;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}
.db-progress-content {
  width:95%;
  height:95%;
  display: flex;
  align-items: center;
  position: relative;
}
.db-progress-point-horizontal {
  position: absolute;
  margin-left:-.5em;
  left:0;
  bottom:-0.12em;
}
.db-progress-point-vertical {
  position: absolute;
  margin-bottom:-.5em;
  left:-0.12em;
  bottom:0;
}
.progress-commot-horizontal {
  position: absolute;
  width:100%;
  height:100%;
  left:0;
  top:0;
}
.progress-commot-vertical {
  position: absolute;
  width:100%;
  height:100%;
  left:0;
  bottom:0;
}
.progress-point-horizontal {
  position: absolute;
  left:0;
  top:0;
}
.progress-point-vertical {
  position: absolute;
  left:0;
  bottom:0;
}

</style>